<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./editor.md-master/css/editormd.css">
    <link rel="stylesheet" href="./css/write.css">
    <title>Document</title>
</head>

<body>
    <div class="title-bar">
        <input type="text" id="headline" placeholder="输入文章标题……" spellcheck="false">
        <div class="title-right">
            <button id="draft">草稿箱</button>
            <div class="pub">
                <button id="publish">发布</button>
                <div class="panel">
                    <h3>发表文章</h3>
                    <!-- 分类 -->
                    <div class="form-item">
                        <div class="label classify">分类:</div>
                        <ul class="classify-list">
                            <li class="lis">前端</li>
                            <li class="lis">后端</li>
                            <li class="lis">Android</li>
                            <li class="lis">ios</li>
                            <li class="lis">人工智能</li>
                            <li class="lis">开发工具</li>
                        </ul>
                    </div>
                    <!-- 添加标签 -->
                    <div class="form-item">
                        <div class="label">
                            添加标签:
                        </div>
                        <select name="" id="label-right">
                            <option value="" label="请搜索添加标签" class="tag"></option>

                            <option value="1" class="tag">前端</option>
                            <option value="2" class="tag">后端</option>
                            <option value="3" class="tag">javascript</option>

                        </select>
                    </div>
                    <!-- 封面上传 -->
                    <div class="form-item">
                        <div class="label">封面上传</div>
                        <div class="adding">
                            <form action="" method="post" enctype="multipart/form-data" id="forms">
                                <input type="file" id="file" name="upload_image"
                                    accept="image/gif,image/jpg,/image/png,image/jpeg,image/webp">
                                <!-- <input type="button" value="下载图片" onclick="save()"> -->
                                <!-- <p id="info"></p> -->
                            </form>
                            <div id="add">
                                <img src="" id="image-preview" alt="" />
                                <img src="./images/ii.png" alt="" class="add-center">
                                <img src="./images/xx.png" id="del">
                            </div>

                        </div>

                    </div>
                    <!-- 收录之目录栏 -->
                    <div class="form-item">
                        <div class="label">收录至目录栏:</div>
                        <select name="" id="label-right2">
                            <option value="" class="page"></option>

                            <option value="1" class="page">前端</option>
                            <option value="2" class="page">后端</option>
                            <option value="3" class="page">javascript</option>

                        </select>
                    </div>
                    <!-- 编辑摘要 -->
                    <div class="form-item">
                        <div class="label">编辑摘要:</div>
                        <div class="digest">
                            <textarea name="" id="" cols="30" rows="10"></textarea>
                        </div>
                    </div>
                    <!-- 提交 -->
                    <div class="panel-footer">
                        <button id="foo-btn">确定并发布</button>
                        <button id="foo-cancel">取消</button>
                    </div>
                </div>
            </div>
            <div class="img">
                <img src="./images/M9Z$AUEH6~N)}TG[LH{OZVY.png" alt="">
            </div>
            <div class="img">
                <img src="./images/head.jpg" alt="">
            </div>
        </div>
    </div>
    <div id="test-editor">

        <textarea style="display:none;" id="word">### 关于 Editor.md
    
    **Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
        </textarea>
    </div>
    <div class="err">错误错误</div>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="./editor.md-master/editormd.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var editor = editormd("test-editor", {
                width: "100%",
                height: "100%",
                path: "editor.md-master/lib/"
            });
        });
    </script>
    <script>

        // 发布
        let publish = document.getElementById("publish");
        let panel = document.getElementsByClassName("panel")[0]
        let pu = true;
        publish.onclick = function () {
            if (pu) {
                panel.style.display = "block"
                pu = false
            } else {
                panel.style.display = "none"
                pu = true
            }
        }


        // 图片上传
        let add = document.getElementById("add")
        let fileInput = document.getElementById("file");
        // let info =document.getElementById("info");
        let preview = document.getElementById("image-preview")
        let del = document.getElementById("del")
        let forms = document.getElementById("forms")
        let addCenter = document.getElementsByClassName("add-center")[0]
        console.log(addCenter);

        // 监禁change事件
        fileInput.addEventListener('change', function () {
            // 隐藏加号
            addCenter.style.display = "none"

            // 清除背景图片
            // preview.style.backgroundImage='';
            if (!fileInput.value) {
                // info.innerHTML="没有选择文件";
                return
            }
            let file = fileInput.files[0];
            let size = file.size;
            console.log(file);
            if (size >= 1 * 1024 * 1024) {
                alert("文件大小超出限制")
                info.innerHTML = "文件超出限制";
                return false;
            }
            console.log(['image/gif', ' image/jpeg', 'image/png', 'image/jpg'].includes(file.type));
            // 获取file信息
            // info.innerHTML =`文件名称： +${file.name}<br>文件大小：${file.size}<br>上传时间：${file.lastModifiedDate}`;
            if (!['image/gif', 'image/jpeg', 'image/png', 'image/jpg', 'image/webp'].includes(file.type)) {
                alert('不是有效的图片文件')
                return
            }
            console.log(141);
            // 读取文件
            let reader = new FileReader();
            reader.onload = function (e) {
                let data = e.target.result;
                preview.src = data;
                del.style.display = "block";
                preview.style.display = "block"
            }
            // 删除图片
            del.onclick = function (e) {
                preview.src = '';
                e.stopPropagation();
                del.style.display = "none"
                addCenter.style.display = "block";
                preview.style.display = "none"

            }
            // 以dataurl的形式读取文件
            reader.readAsDataURL(file);
            /* function save(){
                var url =preview.src; //获取图片地址
                var a =document.createElement('a');  //创建一个a节点插入document
                var event =new MouseEvent('click') //模拟鼠标点击事件
                a.download ='beautufulGirl'  //设置a节点的download属性值
                a.href =url; //将图片的是src赋值给a节点的href
                a.dispatchEvent(event)
            } */


        })
        // 模拟点击
        add.onclick = function () {
            fileInput.click();

        }
        // 选择分类
        let lis = document.getElementsByClassName("lis")
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                for (let j = 0; j < lis.length; j++) {
                    lis[j].classList.remove("active")
                }
                this.classList.add("active")
            }
        }

        // 提交
        let btn=document.getElementById("foo-btn");
        let cancel=document.getElementById("foo-cancel");
        let tag=document.getElementsByClassName("tag");
        let page=document.getElementsByClassName("page");
        let label1=document.getElementById("label-right");
        let label2=document.getElementById("label-right2");
        let err=document.getElementsByClassName("err")[0]
        
        console.log(btn.innerText);
        btn.onclick=function(){
            let t=label1.selectedIndex;
            let p=label2.selectedIndex;
            // 判断是否选择分类
            /* for(let i=0;i<lis.length;i++){
                if(lis[i]==)    
            } */
            //判断是否选择标签
            if(tag[t].innerText==''){
                err.style.display = "block"
                err.innerText="请选择一个标签";
                let mytime;
                myTimer = setTimeout(function () {
                            err.style.display = "none"
                        }, 1500)
                        return
            }
            //判断

        }

    </script>
</body>

</html>